<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{info.userName}}</view>
		</view>
		<scroll-view scroll-x="true" class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == tabIndex?'text-orange cur':''"
					v-for="(item,index) in tabListData" :key="index" @click="bindTabChange(index)">
				{{item}}
				</view>
			</view>
		</scroll-view>
		<view class="panel-body bg-white margin-top-sm padding" v-if="tabIndex == 0">
			<view class="flex justify-between">
				<view class="solids">
					<image :src="userImgUrl" mode="aspectFill" @error="bindImgError('userImg')"></image>
				</view>
				<view class="user-info">
					<view class="flex justify-between">
						<view>ID：{{info.userId||'-'}}</view>
						<view class="text-orange">{{info.roleTypeName}}</view>
					</view>
					<view>姓名：{{info.userName||'-'}}</view>
					<view>手机号：{{info.userPhone||'-'}}</view>
					<view>其它角色：{{info.roleTypeNames||'-'}}</view>
					<view>创建时间：{{info.createDate||'-'}}</view>
				</view>
			</view>
			<view class="flex justify-between margin-top">
				<view>备注</view>
				<view>{{info.note || '---'}}</view>
			</view>
			<view class="flex justify-between margin-top">
				<view>最后登陆时间</view>
				<view>{{info.lastLoginDate || '---'}}</view>
			</view>
			<view class="flex justify-around margin-top solid-top solid-bottom padding" v-if="info.roleType == 3">
				<view class="text-center">
					<view>分配设备数量</view>
					<view class="text-xl margin-top">{{info.deviceCount || 0 }}</view>
				</view>
				<view class="solid-right"></view>
				<view class="text-center">
					<view>分配网点数量</view>
					<view class="text-xl margin-top">{{info.placeCount || 0}}</view>
				</view>
			</view>
		</view>
		<!-- 网点列表 -->
		<view class="list-body" v-if="tabIndex == 1">
			<scroll-view scroll-y="true">
				<view class="cu-card article" v-for="(item,index) in placeListData" :key="index">
					<view class="cu-item padding-sm" @click="toPlaceInfo(item.id)">
					   <view class="content margin-bottom">
						   <image :src="item.imgUrl?item.imgUrl:'/static/logo.jpg'" mode="aspectFill"></image>
						   <view class="info">
							   <view class="text-cut text-df text-orange">{{item.name}}</view>
							   <view>网点地区：{{item.province+'-'+item.city+'-'+item.cityArea}}</view>
							   <view>角色类型：店员</view>
							   <view>备注：{{item.note || '---'}}</view>
							   <view>分配时间：{{item.joinDate || '---'}}</view>
						   </view>
					   </view>
					   <view class="profit-info margin-sm">
						   <view class="flex justify-between solid-bottom padding-bottom-sm" v-for="(profit,profitIndex) in item.incomeRatioItems">
								<view>{{profit.businessTypeName}}</view>
								<view>{{profit.incomeRatio}}%</view>
						   </view>
					   </view>
					   <button class="cu-btn line-orange btn-info"><text class="cuIcon-searchlist"></text></button>
				   </view>
				</view>
				<view class="foot" v-if="placeListData && placeListData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
		<view class="list-body" v-if="tabIndex == 2">
			<view class="cu-list menu sm-border margin-top-sm">
				<view class="cu-item padding-sm" v-for="(item,index) in powerListData" :key="index">
					<view>权限：{{item.name}}</view>
					<view><switch class="switch-func" :data-id="item.id" :class="canCancelOrder == 2?'checked':''" 
						:checked="canCancelOrder == 2?true:false" @change="powerChange"/></view>
				</view>
			</view>
			
			<scroll-view scroll-y="true">
				<view class="cu-list menu sm-border margin-top-sm">
					<view class="cu-item padding-sm" v-for="(item,index) in funcModelListData" :key="index">
						<view>功能模块：{{item.name}}</view>
						<view><switch class="switch-func" :data-id="item.id" :data-index="index" :class="item.state == 2?'checked':''" 
							:checked="item.state == 2?true:false" @change="funcModelChange"/></view>
					</view>
				</view>
				<view class="foot" v-if="funcModelListData && funcModelListData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js'); 
	export default {
		data() {
			return {
				roleType:this.$store.getters.GET_userInfo.roleType,
				
				userId:null,
				userImgUrl:'/static/def_face.jpg',
				info:{
					userName:'用户姓名'
				},
				
				placeListData:[],
				placeKeyword:null,
				placePageNo:1,
				
				funcModelListData:[],
				
				tabListData:["基础信息","网点信息"],
				tabLoadState:[0,0,0],				//tab加载状态，第一次切换时修改为1，后面判断是否为1，如果为1则不进行加载
				tabIndex:0,
				
				powerListData:[],
				canCancelOrder:1,
				
				lastRequestTimes:null
			};
		},
		onLoad(option) {
			this.userId = option.id;
			this._loadInfo();
		},
		onShow(){
			this.tabLoadState = [0,0,0];
		},
		methods:{
			_loadInfo:function(){
				if(this.userId){
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.clerkInfo,{
						userId:this.userId
					},res=>{
						console.log(res);
						uni.hideLoading();
						if(res.code==200){
							_self.info = res.body;
							_self.canCancelOrder = _self.info.canCancelOrder;
							if(_self.info.userFaceImg){
								_self.userImgUrl = _self.info.userFaceImg;
							}
							if(_self.roleType == 98){
								_self.tabListData.push("权限管理");
								_self._loadPowerList();
							}
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false,
								complete:function(){
									uni.navigateBack();
								}
							});
						}else {
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							});
							setTimeout(function(){
								uni.navigateBack();
							},1000);
						}
					})
				}else{
					uni.showToast({
						title:'参数错误',
						icon:'error'
					});
					setTimeout(function(){
						uni.navigateBack();
					},1000);
				}
			},
			_loadPlaceListData:function(){
				if(this.placePageNo > 0){
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.clerkPlaceList,{
						userId:this.userId,
						trim:this.keyword,
						pageNo:this.placePageNo
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							_self.placeListData = _self.placeListData.concat(res.body.items);
							_self.placePageNo = _self.placePageNo + 1;
						}else if(res.code == 202){
							_self.placePageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			_loadFuncModelList:function(){
				console.log(this.info)
				if(this.roleType == 98){
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.clerkFuncModelList,{
						userId:this.userId
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							_self.funcModelListData = res.body.items;
						}else if(res.code == 202){
							//--
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			_loadPowerList:function(e){
				this.powerListData = []
				const _self = this;
				setTimeout(function(){
					_self.powerListData.push({
						id:'canCancelOrder',
						name:'撤销订单'
					});
				},500)
				
			},
			bindImgError:function(type,index){
				if(type == 'userImg'){
					this.userImgUrl = '/static/yonghu.png';
				}
			},
			bindTabChange:function(index){
				this.tabIndex = index;
				if(index == 1){
					let state = this.tabLoadState[index];
					if(state == 0){
						this.tabLoadState[index] = 1;
						this._loadPlaceListData();
					}
				}else if(index == 2){
					let state = this.tabLoadState[index];
					if(state == 0){
						this.tabLoadState[index] = 1;
						this._loadFuncModelList();
					}
				}
			},
			funcModelChange:function(e){
				console.log(e);
				if(this.$utils.isRepeat(this.lastRequestTimes)){
					this.funcModelListData = [];
					this._loadFuncModelList();
					uni.showToast({
						title:'点击过快！',
						icon:'none'
					})
					return;
				}
				this.lastRequestTimes = new Date();
				uni.showLoading({
					title:'加载中...'
				})
				var id = e.currentTarget.dataset.id;
				var state = 1;
				if(e.detail.value){
					state = 2;
				}
				const _self = this;
				const api = this.$request;
				api.post(api.url.clerkFuncModelUpdate,{
					userId:this.userId,
					funcModelId:id,
					state:state
				},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						_self._loadFuncModelList();
					}else if(res.msg){
						_self.funcModelListData = [];
						_self._loadFuncModelList();
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						_self.funcModelListData = [];
						_self._loadFuncModelList();
						uni.showToast({
							title:'修改数据失败',
							icon:'error'
						})
					}
				})
			},
			powerChange:function(e){
				console.log(e);
				if(this.$utils.isRepeat(this.lastRequestTimes)){
					this._loadPowerList();
					uni.showToast({
						title:'点击过快！',
						icon:'none'
					})
					return;
				}
				this.lastRequestTimes = new Date();
				uni.showLoading({
					title:'加载中...'
				})
				var type = e.currentTarget.dataset.id;
				var state = 1;
				if(e.detail.value){
					state = 2;
				}
				const _self = this;
				const api = this.$request;
				api.post(api.url.clerkPowerUpdate,{
					userId:this.userId,
					type:type,
					state:state
				},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						_self.canCancelOrder = state;
						_self._loadPowerList();
					}else if(res.msg){
						_self._loadPowerList();
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						_self._loadPowerList();
						uni.showToast({
							title:'修改数据失败',
							icon:'error'
						})
					}
				})
			},
			toPlaceInfo(id){
				uni.navigateTo({
					url:"/pages/place/info?id="+id
				})
			},
			//滑动底部加载
			scrollTolower:function(e){
				console.log(e);
				if(this.tabIndex == 1){
					this._loadPlaceListData();
				}
			}
		}
		
	}
</script>

<style lang="less">
.container {position:relative;height:100vh;}
.container .panel-header{height:90rpx;width:100vw;font-size:28rpx;background-color:#fff;}
.container .panel-header .text-cut{width:75%;margin:auto;text-align:center;}

.container .panel-body image{width:200rpx;height:200rpx;}
.container .panel-body .user-info{width:62vw;}

.list-body scroll-view{height:85vh;}
.list-body .cu-card.article>.cu-item .content{padding:0;}
.list-body .cu-card.article>.cu-item .content>image{width:180rpx;height:180rpx;}
.list-body .cu-card.article>.cu-item .content .info{width:70%;}
.list-body .cu-card.article>.cu-item{margin-bottom:0;padding-bottom:0;font-size:26rpx;}

.list-body .cu-card>.cu-item .btn-info{position:absolute;top:0;right:0;border:0;font-size:42rpx;}
.list-body .cu-card>.cu-item .btn-info::after{border:0;}

.list-body .cu-card>.cu-item{position:relative;}
.list-body .cu-card>.cu-item .state-info{position:absolute;top:15rpx;right:15rpx;}
</style>
